<template>
  <div class="card" :class="{ 'card--disabled': disabled }" @click="handleClick">
    <img :src="image" class="card__image"/>
    <div class="card__text" :class="{ 'card__text--disabled': disabled }">{{ title }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';

@Component
export default class Card extends Vue {
  @Prop(String) title!: string
  @Prop(String) image!: string
  @Prop({type: Boolean, default: false}) disabled?: boolean

  handleClick() {
    if (!this.disabled) {
      this.$emit('click')
    }
  }
}
</script>

<style lang="scss" scoped>
.card {
  background: #fff;
  padding: 16px 12px;
  min-width: 120px;
  min-height: 88px;
  position: relative;
  border-radius: 6px;
  margin: 0 10px 10px 0;
  box-shadow: 0 1px 2px 0 rgba(239, 243, 247, 0.8);
  text-align: center;

  &--disabled {
    filter: grayscale(85%);
  }

  &__image {
    width: 32px;
    height: 32px;
    margin-top: 2px;
  }

  &__text {
    color: $font-color;
    font-size: 14px;
    margin-top: 4px;

    &--disabled {
      color: #a2a2a2;
    }
  }
}
</style>
